import { useLocation, useNavigate } from 'react-router-dom';
import { useEffect, useState } from 'react';
import { Breadcrumb } from 'antd';
import '@/style/news.scss'
function News() {
	const navigate = useNavigate();
	const location = useLocation();
  	const objectData = location.state || {};
	const [newsDetail, setNewsDetail] = useState(null);
	const getNewsDetail = async () => {
		const content = objectData.content
		const newContent = content.replace(new RegExp('./df', 'g'), '/portal/r/df')
		const newObjectData = {
			...objectData,
			content: newContent
		}
		setNewsDetail(newObjectData || null)
	};
	const backNews = (key) => {
		const href =  `/news`
		navigate(href);
	}
	useEffect(() => {
		getNewsDetail();
	}, []);

	return (
		<>
			<div className="newsDetailBox">
				<div className="mainContent">
					<Breadcrumb
						items={[
							{
								title: <a onClick={backNews}>新闻中心</a>,
							},
							{
								title: 'NewsDetail',
							},
						]}
					/>
					{newsDetail && (
						<>
							<div className="newsDetailTitle">
								{newsDetail.title}
							</div> 
							<div className='newsDetailContent' dangerouslySetInnerHTML={{ __html: newsDetail.content }}>
							</div>
						</>
					)}
				</div>
			</div>
		</>
		
	)
}
 
export default News